<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <hr />
    <!-- 组件标签就是一个自定义标签 -->
    <UserCard v-for="(user, i) in userList" :user="user" :key="i"></UserCard>
    <hr />
    <TestBreadcrumb v-bind:menus="menus"></TestBreadcrumb>
    <TestBreadcrumb :menus="menus1"></TestBreadcrumb>
    <TestBreadcrumb :menus="['item1', 'item2']"></TestBreadcrumb>
    <hr />
    <ul>
      <li v-for="(p, i) in products" :key="i">
        <span style="display: inline-block; width: 40px">{{ p.num }}</span>
        <!-- vue的事件对象固定名 $event -->
        <InputNumber
          :num="p.num"
          @update="changeItemNum($event, p)"
        ></InputNumber>
      </li>
    </ul>
  </div>
</template>

<script>
import UserCard from "./components/UserCard";
import TestBreadcrumb from "./components/TestBreadcrumb";
import InputNumber from "./components/InputNumber";
export default {
  name: "App",
  components: {
    UserCard,
    TestBreadcrumb,
    InputNumber,
  },
  // 工厂函数:在组件被多次调用时，复制数据对象
  data: function () {
    return {
      menus: ["🏠", "购物车"],
      menus1: ["首页", "用户管理", "员工管理"],
      userList: [
        { name: "果", phone: "0447-73661615" },
        { name: "鹏", phone: "12793951507" },
        { name: "炎彬", phone: "016-59606014" },
        { name: "潇然", phone: "18380531165" },
        { name: "子骞", phone: "0105-69679021" },
        { name: "哲瀚", phone: "0466-65643241" },
      ],
      products: [{ num: 4 }, { num: 5 }, { num: 10 }, { num: 2 }],
    };
  },
  methods: {
    changeItemNum(nv, p) {
      console.log("父组件方法changeItemNum", nv);
      p.num = nv;
    },
  },
  computed: {},
  watch: {},
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  margin-top: 60px;
  margin-bottom: 1000px;
}
</style>
